<!--
 * @Description: 底部第四个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:24:49
-->
<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>

<script>
import { BidirectionalBar } from '@antv/g2plot';
import { get } from '@/utils/request'
// 1.引入momentjs commonjs 
let moment = require('moment');
export default {
  data() {
    return {
      tempData:[],
    };
  },
  computed: {},
  methods: {
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 30,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10=15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // this.loadCharts();
      // console.log(res,'获取响应');
      this.createPie();
    },
    createPie() {
       const data = [
  { country: '兰州', '空气质量指数': 13.4, '降水指数': 12.3 },
  { country: '天水', '空气质量指数': 14.4, '降水指数': 6.3 },
  { country: '庆阳', '空气质量指数': 18.4, '降水指数': 8.3 },
  { country: '白银', '空气质量指数': 34.4, '降水指数': 13.8 },
  { country: '武威', '空气质量指数': 44.4, '降水指数': 19.5 },
  { country: '酒泉', '空气质量指数': 24.4, '降水指数': 18.8 },
  { country: '张掖', '空气质量指数': 54.4, '降水指数': 19.5 },
  { country: '陇南', '空气质量指数': 104.4, '降水指数':20.4 },
  { country: '平凉', '空气质量指数': 165.2, '降水指数':18.5},
];

const BidirectionalBarPlot = new BidirectionalBar(this.$refs.container, {
  data,
  xField: 'country',
  xAxis: {
    position: 'bottom',
  },
  appendPadding: [0, 30],
  interactions: [{ type: 'active-region' }],
  yField: ['空气质量指数', '降水指数'],
  tooltip: {
    shared: true,
    showMarkers: false,
  },
  // 开启 label 展示
  label: {
    // 默认居中, 'middle'
    position: 'right',
    // 默认为: 2
    // offset: 4,
  },
});

BidirectionalBarPlot.render();

    }
  },
  created() { },
  mounted() {
    this.createPie()  
    // this.getTempData()
  },
};
</script>
<style scoped></style>